.font-demo{
  width: 200px;
  color: #3a8ee6;
}

:root{
  // FFFF09
  --lightLinearColor:#FFD700;
  --darkLinearColor:#37FA0A;
}

.my-linear-gradient{
  display: block;
  // width: 600px;
  // height: 900px;
  /*渐变背景，此处为能无缝拼接的渐变 即0~100%*/ /*linear-gradient(线性渐变)*/
  /*
    left,
    #3498db,
    #f47920 10%,
    #d71345 20%,
    #f7acbc 30%,
    #ffd400 40%,
    #3498db 50%,
    #f47920 60%,
    #d71345 70%,
    #f7acbc 80%,
    #ffd400 90%,
    #3498db
   */
  background-image: -webkit-linear-gradient(
                  left,
                  var(--lightLinearColor),
                  var(--darkLinearColor) 10%,
                  var(--darkLinearColor) 20%,
                  var(--darkLinearColor) 30%,
                  var(--darkLinearColor) 40%,
                  var(--lightLinearColor) 50%,
                  var(--darkLinearColor) 60%,
                  var(--darkLinearColor) 70%,
                  var(--darkLinearColor) 80%,
                  var(--darkLinearColor) 90%,
                  var(--lightLinearColor)
  );
  color: transparent;
  /*文字填充色为透明*/
  -webkit-text-fill-color: transparent;
  /* background-clip 规定背景的绘制区域：*/ /*背景剪裁为文字，相当于用背景填充文字 CSS3新属性*/
  background-size:200% 100%;
  /*背景图片向水平方向扩大一倍，这样background-position才有移动与变化的空间*/
  /* 动画 */
  animation: masked-animation 3s infinite linear;
  -webkit-background-clip: text;
}

@keyframes masked-animation {
  0% {
    background-position: 0 0;
    /*background-position 属性设置背景图像的起始位置。*/
  }
  100% {
    background-position: -100% 0;
  }
}

